<template>
    <div class="up">
        <div class="left">
            <el-form ref="formRef" :model="form" inline label-width="0">
                <el-form-item prop="uname">
                    <el-input v-model.trim="form.uname" placeholder="请输入姓名" style="width: 120px"/>
                </el-form-item>
                <el-button :icon="Search" plain type="primary" @click="searchUser"/>
                <el-button :icon="Refresh" plain type="info" @click="reFresh(formRef)"/>
            </el-form>
        </div>
        <div class="right">
            <el-button v-show="!info.bool" :icon="Plus" plain type="primary" @click="addSubmit"/>
        </div>
    </div>
</template>

<script lang='ts' setup>

import { Plus, Refresh, Search } from '@element-plus/icons-vue'
import { onUnmounted, ref } from 'vue'
import { FormInstance } from 'element-plus'
import { isEmpty } from '@/utils/commonUtils'
import { Message } from '@/plugins/element'
import { EventBus } from '@/utils/mitt'
import { useStaff } from '@/store'
import { storeToRefs } from 'pinia'

const searchBool = ref<boolean>(false)
const form = ref<{ uname: string }>({ uname: '' })
const formRef = ref<FormInstance>()
const Staff = useStaff()
const { info } = storeToRefs(Staff)
const searchUser = () => {
  const { uname } = form.value
  if (isEmpty(uname as string)) return Message.warning('请检查输入内容')
  searchBool.value = true
  EventBus.emit('searchUser', { bool: searchBool.value, uname: form.value.uname })
}

const reFresh = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  searchBool.value = false
  EventBus.emit('searchUser', { bool: searchBool.value })
}
const addSubmit = () => {
  EventBus.emit('addUser', { bool: true })
}
onUnmounted(() => {
  EventBus.off('addUser')
  EventBus.off('searchUser')
})
</script>

<style lang='scss' scoped>
.up {
  display: flex;
  justify-content: space-between;
}

:deep(.left .el-form-item) {
  margin-bottom: 0;
}
</style>